<template>
  <view class="top-box"
        :style="{height: topBarHeight+'px'}">
    <view class="top-title" style="box-sizing: content-box;"
          :style="{marginTop:systemInfo.statusBarHeight+'px',height:`${systemInfo.isIos ? 44 : 46}px`}">
			<view class="top-c"
            style="justify-content: center;font-size: 36rpx;font-weight: 400;color: #333333;">
        <u-icon name='arrow-left' class='back-icon' @click="backFn"></u-icon>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		name:"ComTopBar",
    props:{
      bgColor:{
        default:'#fff',
        type:String
      },
      txtColor:{
        default: "#333",
        type:String
      }
    },
		data() {
			return {
        systemInfo: {
          statusBarHeight:0,
          isIos:false,
          barHeight:0
        },
        topBarHeight:0,
			};
		},
    created() {
      uni.getSystemInfo({
        success: (res) => {
          console.log("res", res);
          this.systemInfo.statusBarHeight = res.statusBarHeight; // 手机状态栏的高度
          if (res.platform === "ios" || res.system.indexOf('iOS') > -1 || res.system.indexOf(
              'macOS') > -1) {
            // 是否为ios这里包括ipad和macos
            this.systemInfo.isIos = true;
          }

          this.topBarHeight = this.systemInfo.isIos ? this.systemInfo.barHeight + 44 : this
              .systemInfo.barHeight + 46

        }
      })
    },
    methods:{
      backFn(){
        this.$emit('backFn')
      }
    }
  }
</script>

<style lang="scss">
.top-box{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  .top-title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    .arrow{
      position: absolute;
      left: 34rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

}

.back-icon{
	position: absolute;
	top: 50%;
	left: 26rpx;
	transform: translateY(-50%);
}

</style>
